<template>
  <div
    :class="[
      'global-common-info-table-container',
      isTopDivided ? 'info-table-top-divided' : '',
      isBottomDivided ? 'info-table-bottom-divided' : '',
    ]"
  >
    <slot name="default"></slot>
  </div>
</template>

<script>
export default {
  name: "CommonInfoTable",
  props: {
    isTopDivided: {
      type: Boolean,
      default: false,
    },
    isBottomDivided: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {},
};
</script>

<style scoped lang="scss">
.global-common-info-table-container {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;

  .global-info-table-row-wrap {
    border-bottom: 1px solid #eee;

    &:last-child {
      border-bottom: 0;
      min-height: 40px;
    }
  }
}

.info-table-top-divided {
  border-top: 1px solid #eee;
}

.info-table-bottom-divided {
  border-bottom: 1px solid #eee;
}
</style>
